<template>
  <div class="box-padding">
    <Header class="header-cont main__title--top">{{$route.params.name}}</Header>
    <Row>
      <Col span="24"
           class="role-oneCol">
      <span :class="{star: !isDisabled}">职务类型</span>
      </Col>
      <Col span="24"
           class="role-twoCol">
      <Select v-model="roleObj.type"
              style="width:200px"
              :disabled="isDisabled || isCompany ||isDepart"
              @on-change='changeType'>
        <Option v-for="item in roleType"
                :value="item.code"
                :key="item.code">{{ item.name }}</Option>
      </Select>
      </Col>
      <Col span="24"
           class="role-oneCol">
      <span :class="{star: !isDisabled}">职务名称</span>
      </Col>
      <Col span="24"
           class="role-twoCol">
      <Input v-model="roleObj.name"
             clearable
             style="width: 200px"
             :disabled="isDisabled"
             maxlength='20'
             placeholder="请输入职务名称" />
      </Col>
      <Col span="24"
           class="role-oneCol">
      <span :class="{star: !isDisabled}">适用范围</span>
      </Col>
      <Col span="24"
           class="role-twoCol">
      <Select v-model="roleObj.scope"
              style="width:200px"
              :disabled="isDisabled || isCompany ||isDepart || isUserArea">
        <Option v-for="item in scopeList"
                :value="item.code"
                :key="item.code">{{ item.name }}</Option>
      </Select>
      </Col>
      <Col span="24"
           class="role-oneCol">
      <span>备注</span>
      </Col>
      <Col span="24"
           class="role-twoCol">
      <Input v-model="roleObj.note"
             clearable
             style="width: 500px;height: 120px"
             :disabled="isDisabled"
             type="textarea"
             maxlength='500'
             placeholder="请输入备注" />
      </Col>
    </Row>
    <div class="role-bottom"
         v-show="$route.params.type!='details'">
      <Button type="primary"
              @click="savePost">保存</Button>
      <Button style="margin-left:20px;"
              @click="closetab">取消</Button>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      list: [],
      roleObj: {},
      scopeList: [],
      roleType: [],
      scope: {},
      menuList: [],
      appList: [],
      miniprogramList: [],
      officialAccountsList: [],
      isDisabled: false,
      user: '',
      isUserArea: false,
      isCompany: false, //公司级
      isDepart: false, //项目级
      isOrg: false //集团级
    }
  },
  mounted() {
    this.user = this.$route.params.user //用户身份
    this.dictTypeCode()
    this.dictTypeCode1()
    this.isDisabled = this.$route.params.type == 'details' ? true : false
    if (this.$route.params.type != 'add') {
      this.roleDetail(this.$route.params.id)
    }
    if (
      this.roleObj.type == 'POST_TYPE_2' &&
      this.user == 'ROOT_ENTERPRISE_USER'
    ) {
      this.isUserArea = true
    } else {
      this.isUserArea = false
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    // 编辑关闭
    closetab() {
      /**
       * 如果是调用closeTag方法，普通的页面传入的对象参数只需要写name字段即可
       * 如果是动态路由和带参路由，需要传入query或params字段，用来区别关闭的是参数为多少的页面
       */
      this.closeTag({
        name: this.$route.name,
        params: this.$route.params
      })
    },
    // 角色详情
    roleDetail(id) {
      if (this.$route.params.name === '日志详情') {
        this.$api.operationLog.getOperationLogDetail(id).then(res => {
          if (res.code === 200) {
            let data = JSON.parse(res.data.params)
            this.roleObj = { ...data }
          } else {
            this.$Message.error(res.message)
          }
        })
      } else {
        this.$api.positionManagement.roleDetail(id).then(resp => {
          if (resp.code == 200) {
            this.roleObj = resp.data

            if (this.user !== 'ROOT_ENTERPRISE_USER') {
              //不是顶级的话
              if (this.roleObj.type == 'POST_TYPE_2') {
                this.isUserArea = true
              }
            } else {
              //顶级身份是为机构不能选择，默认范围为机构
              if (this.roleObj.type == 'POST_TYPE_2') {
                this.roleObj.scope = 'ENTERPRISE_LEVEL'
                this.isUserArea = true
              } else {
                this.isUserArea = false
              }
            }
          }
        })
      }
    },
    changeType(value) {
      if (this.user == 'ROOT_ENTERPRISE_USER' && value == 'POST_TYPE_2') {
        //顶级是选择专用只有项目级
        this.isUserArea = true
        this.roleObj.scope = 'ENTERPRISE_LEVEL'
      } else {
        this.isUserArea = false
      }
    },
    // 职务类型
    dictTypeCode1() {
      this.$api.positionManagement.dictTypeCode('POST_TYPE').then(resp => {
        if (resp.code == 200) {
          this.roleType = resp.data
          if (this.user !== 'ROOT_ENTERPRISE_USER') {
            //不是顶级的话
            this.roleObj.type = 'POST_TYPE_2'
          }
        }
      })
    },
    // 适用范围
    dictTypeCode() {
      this.$api.positionManagement
        .dictTypeCode('RANGE_APPLICATION')
        .then(resp => {
          if (resp.code == 200) {
            this.scopeList = resp.data
            switch (this.user) {
              case 'NOMAL_ENTERPRISE_USER': //公司级
                this.roleObj.scope = 'ENTERPRISE_LEVEL'
                this.roleObj.type == 'POST_TYPE_2'
                this.isCompany = true
                break
              case 'PROJECT_TEAM_USER': //项目级
                this.roleObj.scope = 'PROJECT_LEVEL'
                this.roleObj.type == 'POST_TYPE_2'
                this.isDepart = true
                break
              default:
                //其他
                //集团级
                this.isOrg = true
                break
            }
          }
        })
    },
    // 保存修改/新增
    savePost() {
      let params = this.$route.params
      if (!this.roleObj.name) {
        this.$Message.error('请填写职务名称')
      } else if (!this.roleObj.type) {
        this.$Message.error('请选择职务类型')
      } else if (!this.roleObj.scope) {
        this.$Message.error('请选择适用范围')
      } else {
        if (this.$route.params.type == 'edit') {
          var param = {
            id: this.$route.params.id,
            name: this.roleObj.name,
            note: this.roleObj.note,
            type: this.roleObj.type,
            scope: this.roleObj.scope
          }
          this.$api.positionManagement.editRole(param).then(resp => {
            if (resp.code == 200) {
              this.$Message.success('修改成功')
              this.closeTag({
                name: 'job-management-edit',
                params: params
              })
              this.$router.push({
                name: 'job-management'
              })
            } else {
              this.$Message.warning(resp.message)
            }
          })
        } else {
          this.$api.positionManagement.addRole(this.roleObj).then(resp => {
            if (resp.code == 200) {
              this.$Message.success('添加成功')
              this.closeTag({
                name: 'job-management-add',
                params: params
              })
              this.$router.push({
                name: 'job-management'
              })
            } else {
              this.$Message.warning(resp.message)
            }
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.role-title {
  color: #333;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dcdee2;
  font-weight: bold;
  margin-bottom: 20px;
}
.role-oneCol {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}
.role-box {
  padding-top: 20px;
}
.role-div {
  display: flex;
  flex: column;
  padding-left: 50px;
  height: 40px;
  line-height: 40px;
}
.admin-role {
  padding-right: 30px;
  min-width: 100px;
}
.role-bottom {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
.star:before {
  content: '*';
  display: inline-block;
  margin-right: 4px;
  line-height: 1;
  font-family: SimSun;
  font-size: 14px;
  color: #ed4014;
}
</style>
